<!doctype html>
<html>

<head>
    <title>Canvas HTML5</title>

</head>

<body>


    <div class="output"></div>
    <script>
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.setAttribute('width', '600');
        canvas.setAttribute('height', '400');
        document.body.prepend(canvas);
        const textPos = Array(60).join(0).split('');
        console.log(textPos);

        function matrix() {
            let output = '0';
            ctx.fillStyle = 'rgba(0,0,0,.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'green';
            textPos.map((posY, index) => {
                output = String.fromCharCode(62 + Math.random() * 26);
                console.log(output);
                let posX = (index * 10) + 10;
                ctx.fillText(output, posX, posY);
                if (posY > 100 + Math.random() * 1000) {
                    textPos[index] = 0;
                }
                else {
                    textPos[index] = posY + 10;
                }
            })
        }
        setInterval(matrix, 50);
    </script>
</body>

</html>
